import HitText from "@/app/[language]/components/HitText";
import useGetHit from "@/app/[language]/query/useGetHit";
import usePostHit from "@/app/[language]/query/usePostHit";
import { useTranslations } from "next-intl";
import { useEffect } from "react";

export default function HitView() {
  const t = useTranslations();

  const {
    data: [hitBefore, hit],
    isFetched: isHitLoaded,
  } = useGetHit();

  const { mutateAsync: postHit } = usePostHit();

  useEffect(() => {
    (async () => {
      await postHit();
    })();
  }, [postHit]);

  return (
    <>
      <h4>{t("hit00")}</h4>
      {isHitLoaded ? (
        <HitText hitBefore={hitBefore.toString()} hit={hit.toString()} />
      ) : (
        <HitText hitBefore="Loading..." hit="Loading..." />
      )}
    </>
  );
}